/** 
 * 订单编辑
 * 
 */

import { InputItem, List, Toast, Button } from 'antd-mobile';
import { decorator } from 'grey-react-box'
import React from 'react';
import style from './style.module.scss';
import Panel from 'components/Panel';
import { createForm } from 'rc-form';

export default decorator<any, any>(
    createForm()
)(props => {

    const { getFieldProps, getFieldError, getFieldsValue, validateFields } = props.form;

    const onErrorClick = React.useCallback(() => {
        Toast.fail(getFieldError('password2').join('、'), 1);
    }, [getFieldError])

    const onSubmit = React.useCallback(() => {
        validateFields({ force: true }, (error) => {
            if (!error) {
                console.log(getFieldsValue());
            } else {
            }
        });
    }, [getFieldsValue, validateFields])

    return (
        <Panel className={style.body} >
            <form>
                <div className={style.cont} >
                    <List renderHeader={() => '收件人信息'}  >
                        <List.Item wrap>
                            重庆市江北区xxxx小区xx懂xx号
                            <List.Item.Brief>158xxxxxxxx<br />小王</List.Item.Brief>
                        </List.Item>
                    </List>
                    <List renderHeader={() => '发货信息'}  >
                        <InputItem
                            {...getFieldProps('account', {
                                rules: [
                                    { required: true, message: '请输入快递公司' },
                                ],
                            })}
                            clear
                            error={!!getFieldError('account')}
                            onErrorClick={onErrorClick}
                            placeholder="请输入快递公司"
                        >快递公司</InputItem>

                        <InputItem
                            {...getFieldProps('password', { rules: [{ required: true, message: '请输入订单号' }] })}
                            clear
                            placeholder="请输入订单号"
                            error={!!getFieldError('password')}
                            onErrorClick={onErrorClick}
                            type="text"
                        >订单号</InputItem>
                    </List>
                    <div className={style.scanning} >
                        <Button inline style={{ marginRight: '4px' }}>扫描录入</Button>
                    </div>
                </div>
                <Button type="primary" className={style.butt} onClick={onSubmit} >保存</Button>
            </form>
        </Panel >
    )
})


// const CustomChildren = props => {
//     return (
//         <InputItem
//             placeholder="请选择地址"
//             value={props.extra === '请选择' ? undefined : props.extra}
//             onClick={props.onClick}
//             error={props.error}
//             onErrorClick={props.onErrorClick}
//         >
//             地址
//         </InputItem>
//     )
// }

